@charset "utf-8";
@import "../base/conf";

/*===================================================*\
 * 消息状态
\*===================================================*/
.king-notice-box{
    margin-left: 10px;
    padding: 10px;
    padding-left: 33px;
    text-align: left;

    display: inline-block;
    &.king-notice-warning{
        background: url(../images/notice_warning_icon.png) no-repeat left center;
    }
    &.king-notice-success{
        background: url(../images/notice_success_icon.png) no-repeat left center;
    }
    &.king-notice-fail{
        background: url(../images/notice_fail_icon.png) no-repeat left center;
    }
    &.king-notice-question{
        background: url(../images/notice_question_icon.png) no-repeat left center;
    }
    &.king-notice-sad{
        background: url(../images/notice_sad_icon.png) no-repeat left center;
    }
    &.king-notice-happy{
        background: url(../images/notice_happy_icon.png) no-repeat left center;
    }
    .king-notice-text{
    margin: 0;
    line-height: 30px;
    padding-left: 8px;
    min-width: 150px;
    }
}

/*===================================================*\
 * 消息状态2
\*===================================================*/
@mixin notice-color($color, $opacity){
    &.king-notice2{
        background-color: lighten($color, $opacity)!important;
        padding: 8px;
        border-radius: 6px;
        position: relative;
        &.king-notice2-large{
            padding: 15px;
            i{
                font-size: 36px;
            }
        }
        i{
            color: lighten($color, $opacity*0.1);
            position: absolute;
            top: 50%;
            margin-top: -9px;
            font-size: 18px;
        }
        .notice-text{
            margin-left: 25px;
            h4{
                font-size: 13px;
                color: #444;
                margin: 0 0 5px 0;
            }
            p{
                font-size: 12px;
                color: #666;
                margin-bottom: 0;
            }
        }
    }
    &.notice-borders{
        border: 1px solid lighten($color, $opacity*0.8);
    }
}
.king-notice-success{
    @include notice-color($successBgColor,43%);
}
.king-notice-info{
    @include notice-color($infoBgColor,33%);
}
.king-notice-warning{
    @include notice-color($warningBgColor,30%);
}
.king-notice-danger{
    @include notice-color($dangerBgColor,36%);
}

/*===================================================*\
 * 消息状态3
\*===================================================*/
.king-notice3{
    text-align: center;
    font-family: "微软雅黑";
    color:#666;
    .king-notice-img{
        width:78px;
        height:78px;
        display:block;
        margin:5px auto 20px;
        background:url(../images/notice3-icon.png) no-repeat;
    }
    .f12{
        font-family: "宋体";
        color:#98a1b3;
    }
    .king-notice3-color{
        color:#ff7d7d;
    }
    &.king-notice-wating{
        .king-notice-img{
            background-position: 0 0;
        }
    }
    &.king-notice-success{
        .king-notice-img{
            background-position: 0 -78px;
        }
    }
    &.king-notice-fail{
        .king-notice-img{
            background-position: 0 -156px;
        }
    }
}
